<template>
    <div>
        <el-container style="height: 850px; border: 1px solid #eee">
            <el-header style="font-size: 40px; background-color: rgb(70, 76, 91); display: flex; justify-content: flex-end; align-items: center">
                
                <div style="margin-left: auto; display: flex; align-items: center;">
                    <el-button style="background-color: #464c5b; border: none; color: white; font-size: 17px;" @click="handlePassword">
                        <i class="el-icon-info" style="margin-right: 5px;"></i>修改密码</el-button>
                    <el-button style="background-color: #464c5b; border: none; color: white; font-size: 17px;" @click.native="logout">
                        <i class="el-icon-remove" style="margin-right: 5px;"></i>退出登录</el-button>
                </div>
                
            </el-header>
            <el-container>
                <el-aside width="230px" style="border: 1px solid #eee">
                    <el-menu :default-openeds="['1', '2', '3','4', '5']"  ref="menus" @close="handleClose">
                        
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-star-on"></i><router-link to="/firstPage"><span style="font-size: 18px">首页</span></router-link></template>
                        </el-submenu>

                        <el-submenu index="2">
                            <template slot="title"><i class="el-icon-user-solid"></i><span style="font-size: 18px">班级学员管理</span></template>
                            
                                <el-menu-item index="2-1">
                                    <router-link to="/class">班级管理</router-link>
                                </el-menu-item>
                                <el-menu-item index="2-2">
                                    <router-link to="/stu">学员管理</router-link>
                                </el-menu-item>
                            
                        </el-submenu>

                        <el-submenu index="3">
                            <template slot="title"><i class="el-icon-s-help"></i><span style="font-size: 18px">系统信息管理</span></template>
                            
                                <el-menu-item index="3-1">
                                    <router-link to="/dept">部门管理</router-link>
                                </el-menu-item>
                                <el-menu-item index="3-2">
                                    <router-link to="/emp">员工管理</router-link>
                                </el-menu-item>
                            
                        </el-submenu>

                        <el-submenu index="4">
                            <template slot="title"><i class="el-icon-menu"></i><span style="font-size: 18px">课程教务管理</span></template>
                            
                                <el-menu-item index="4-1">
                                    <router-link to="/course">课程管理</router-link>
                                </el-menu-item>
                                <el-menu-item index="4-2">
                                    <router-link to="/course-manage">课程安排</router-link>
                                </el-menu-item>
                            
                        </el-submenu>

                        <el-submenu index="5">
                            <template slot="title"><i class="el-icon-s-data"></i><span style="font-size: 18px">数据统计管理</span></template>
                            
                                <el-menu-item index="5-1">
                                    <router-link to="/emp-rep">员工信息统计</router-link>
                                </el-menu-item>
                                <el-menu-item index="5-2">
                                    <router-link to="/stu-rep">学员信息统计管理</router-link>
                                </el-menu-item>
                            
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <!-- 按钮 -->
                    <el-row>
                        <el-button
                            style="float: left"
                            type="primary"
                            @click="dialogFormVisible = true; dept={}"
                            >
                            + 新增部门
                        </el-button>
                    </el-row>
                    <br>

                    <!--修改密码对话框-->
                    <el-dialog ref="form" title="修改密码" :visible.sync="dialogPassWordVisible" width="30%">
                    <el-form ref="form" :model="theEmp" label-width="80px" size="mini">
                        <el-form-item label="用户名">
                            <el-input v-model="theEmp.username" placeholder="请输入用户名"></el-input>
                        </el-form-item>

                        <el-form-item label="新密码">
                            <el-input type="password" v-model="newPassword" placeholder="请输入新密码" show-password></el-input>
                        </el-form-item>

                        
                        <el-form-item>
                            <el-button type="primary" @click="updatePassword">提交</el-button>
                            <el-button @click="dialogPassWordVisible = false">取消</el-button>
                        </el-form-item>
                    </el-form>
                    </el-dialog>

                    <!-- 数据表格 -->
                    <el-table
                        highlight-current-row
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        border
                    >
                        <el-table-column type="index" width="100" label="序号" header-align="center" align="center"> </el-table-column>
                        <el-table-column prop="name" label="部门名称" header-align="center" align="center"></el-table-column>
                        <el-table-column label="最后操作时间" header-align="center" align="center">
                            <template slot-scope="scope">
                                {{scope.row.updateTime ? scope.row.updateTime.replace('T',' '):''}}
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" width="420" header-align="center" align="center">
                            <template slot-scope="scope">
                                <el-button
                                size="mini"
                                type="primary"
                                plain
                                @click="selectById(scope.row.id)"
                                >编辑</el-button
                                >

                                <el-button
                                size="mini"
                                type="danger"
                                plain
                                @click="deleteById(scope.row.id)"
                                >删除</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 新建对话框 -->
                    <el-dialog title="保存部门" :visible.sync="dialogFormVisible" >
                        <el-form :model="dept">
                            <el-form-item label="部门名称" :label-width="formLabelWidth">
                            <el-input v-model="dept.name"  placeholder="请输入部门名称" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>

                        <div slot="footer" class="dialog-footer">

                            <el-button type="primary" @click="add()">确 定</el-button>
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            
                        </div>
                    </el-dialog>



                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { findAll, add, update, deleteById, selectById } from "@/api/dept.js";
import { removeToken, getEmp} from '@/utils/auth'
import { updateEmp, selectByEmpId } from '@/api/emp'

export default {
    data() {
        return {
            formLabelWidth: "120px",
            dialogFormVisible: false, //控制对话框是否可见
            dept: {
                name: "",
            },
            tableData: [],

            theEmp: {},
            oldPassword: "",
            newPassword: "",
            dialogPassWordVisible: false,

        }
    },

    methods: {
        handleClose(key, keyPath) {
            this.$refs.menus.open(keyPath);
        },

        //删除部门
        deleteById(id) {
            this.$confirm("确认删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
        }).then(() => {
            deleteById(id).then((result) => {
                if(result.data.code == 1){
                    this.$message({
                    message: "恭喜你，删除成功",
                    type: "success",
                    });
                }else{
                    this.$message.error(result.data.msg);
                }
                //重新查询数据
                this.init();
            });
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除",
            });
            });
        },

        //根据ID查询部门 -- 回显
        selectById(id) {
            this.dialogFormVisible = true;
            selectById(id).then((result) => {
                this.dept = result.data.data;
            });
        },

        //保存方法
        add() {
            let method ;// 添加
            if (this.dept.id) {
                method = update(this.dept); // 修改
            }else{
                method = add(this.dept); //添加 
            }
            method.then((result) => {
                if (result.data.code == 1) {
                //修改成功
                this.$message.success("恭喜你，保存成功");
                //重新查询数据
                this.init();
                } else {
                this.$message.error(result.data.msg);
                }
            });
            // 关闭新建窗口
            this.dialogFormVisible = false;

            // 清空模型数据
            this.dept = {};
        },

        //初始化 - 查询全部
        init() {
            findAll().then((result) => {
                console.log(result);
                if (result.data.code == 1) {
                this.tableData = result.data.data;
                }
            });
        },

        //退出登录
        async logout() {
            removeToken();
            this.$router.push('/login')
        },

        //修改密码
        handlePassword() {
            this.oldPassword = this.theEmp.password;
            this.newPassword = '';
            this.dialogPassWordVisible = true;
        },

        updatePassword() {
            if (this.newPassword === this.oldPassword) {
                this.$message.error("新密码与旧密码一致, 重新输入!");
            } else {
                this.theEmp.password = this.newPassword;

                let operator;

                operator = updateEmp(this.theEmp);

                operator.then((resp) => {
                    if (resp.data.code == "1") {
                    this.dialogPassWordVisible = false;
                    //this.page();
                    this.$message({ message: "恭喜你，修改成功", type: "success" });
                    } else {
                    this.$message.error(resp.data.msg);
                    }
                });

            }
        },
    },

    mounted() {
        //当页面加载完成后自动执行。
        this.init();
        this.theEmp = JSON.parse(getEmp());
        selectByEmpId(this.theEmp.id).then((result) => {
                if (result.data.code == 1) {
                    this.theEmp = result.data.data;
                    this.theEmp;
                }
        });
    },
}
</script>

<style>
.router-link-active {
  text-decoration: none;
  color: rgb(0, 110, 255);
}
a{
  text-decoration: none;
  color: black;
}
.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
	display: none; 

}

.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
	display: none;

}
</style>